<template>
	<page-container boxBackground="transparent" :base-tab="3" :shownav="true" navtitle="代表委员交流圈" :istabbox="true">
		<view class="index-root">
			<!-- 新闻列表 begin -->
			<view class="content-item news-list">
				<view class="row">
					<view style="margin-bottom: 20rpx;">
						<u-tabs :list="tabList" @click="tabClick" :current="currentIndex" activeStyle="color:#ff0"
							inactiveStyle="color:#fff" lineColor="#ff0"></u-tabs>
					</view>
					<view class="tabbar" v-if="tabChildrenList.length>0">
						<view class="item" v-for="(item, index) in tabChildrenList" :key="index"
							:class="{ active: tabIndex === index }" @tap="switchTab(index)">
							{{ item.name }}
							<!-- 	<view class="underline" :style="{ border: tabIndex === index ? '2px solid #ad2325' : '0' }">
							</view> -->
						</view>
					</view>
					<view class="u-search" v-if="0">
						<u-search @search="queryList" placeholder="搜索关键字" v-model="keyword"
							:showAction="false"></u-search>
					</view>
					<view class="grid-one" @click="goDetail({detailData:recommended.id})" v-if="recommended.newsTitle">
						<view class="img">
							<image
								:src="recommended.newsCover && recommended.newsCover !== '' ? recommended.newsCover : '/static/img/home/news-1.png'" />
							<!--              <image src="/static/img/home/news-1.png"/>-->
						</view>
						<view class="info">
							<view class="title">
								{{ recommended.newsTitle }}
							</view>
						</view>
					</view>
					<view class="grid" @click="goDetail({detailData:item.id})" v-for="item in newList" :key="item.id">
						<view class="img">
							<image
								:src="item.newsCover && item.newsCover !== '' ? item.newsCover : '/static/img/home/news-1.png'" />
						</view>
						<view class="info">
							<view class="title">
								{{ item.newsTitle }}
							</view>
							<view class="time">{{ item.createTime.substr(0,10) }}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 新闻列表 end -->
			<view v-if="newList.length==0 || recommended.newsTitle==undefined">
				<empty></empty>
			</view>
		</view>
		<u-loading-page :loading="loading"></u-loading-page>
	</page-container>
</template>

<script>
	import empty from "@/components/empty/index.vue";
	import {
		getQueryHeaders,
		requestGet
	} from "@/util/means/request";
	import {
		QUERY_REPRESENTATIVES
	} from "@/api/suggestion";
	import {
		baseMixins
	} from "@/util/baseMixins";
	import {
		messageDetailsPage
	} from "@/util/publicConfig";
	import {
		QueryTalkNews,
		QueryGetTalkNewsTags
	} from "@/api/message";
	import {
		getFileAccessHttpUrl
	} from "@/util/fileUtil";

	export default {
		name: "index",
		mixins: [baseMixins],
		components: {
			empty
		},
		data() {
			return {
				keyword: "",
				loading: false,
				newList: [], // 小图列表
				recommended: {}, // 大图数据
				tabList: [],
				currentIndex: 0,
				tabChildrenList: [],
				tabIndex: 0
			}
		},
		methods: {
			tabClick(item) {
				console.log(item, "######################");
				this.currentIndex = item.index
				this.keyword = ""
				this.tabChildrenList = this.tabList[this.currentIndex].children
				// this.tabChildrenList = this.tabList
				this.tabIndex = 0
				this.getTalkNews()
			},
			switchTab(index) {
				this.tabIndex = index
				this.getTalkNews()
			},
			//获取交流圈类型
			getTalkNewsTags() {
				this.loading = true
				let ower = this
				requestGet({
					url: QueryGetTalkNewsTags,
					data: {},
					header: getQueryHeaders()
				}).then(res => {
					console.log(res, "######################");
					if (res.length > 0) {
						res.map(item => {
							this.tabList.push({
								name: item.title,
								key: item.key,
								url: QueryTalkNews,
								children: item.children || []
							})

						})
						this.currentIndex = 0
						this.tabChildrenList = this.tabList[this.currentIndex].children
						// this.tabChildrenList = this.tabList
						this.tabIndex = 0
						this.getTalkNews()
					}
				}).finally(res => {
					ower.loading = false
				})
			},
			//获取交流圈列表
			getTalkNews() {
				this.loading = true
				let ower = this
				let _key = this.tabList[this.currentIndex].key
				if (this.tabChildrenList.length > 0) {
					_key = this.tabChildrenList[this.tabIndex].key
				}
				requestGet({
					url: QueryTalkNews,
					data: {
						key: _key,
						pageNo: 1,
						pageSize: 50,
						keyword: this.keyword
					},
					header: getQueryHeaders()
				}).then(res => {
					if (res.records.length > 0) {
						//格式化图片地址
						res.records.forEach(item => {
							item.newsCover = getFileAccessHttpUrl(item.newsCover)
						})
						ower.newList = res.records.slice(1);
						ower.recommended = res.records[0]
					} else {
						ower.newList = []
						ower.recommended = {}
					}
				}).finally(res => {
					ower.loading = false
				})
			},
			goDetail(detailData) {
				this.goSubPage(`${messageDetailsPage}?talkNewsId=${detailData.detailData}`)
			},
			queryList() {
				console.log("搜搜")
				this.getTalkNews()
				// let {authType, pageNo = 1, pageSize = 500} = this
				// requestGet({
				//   url: QUERY_REPRESENTATIVES,
				//   data: {authType, pageNo, pageSize},
				//   header: getQueryHeaders()
				// }).then(res => {
				//   this.dataList = res.records.map(item => {
				//     let {representativeName, id: representativeId} = item;
				//     return {representativeName, representativeId}
				//   })
				// })
			},
		},
		created() {},
		mounted() {},
		onLoad() {
			this.getTalkNewsTags()
			// this.getTalkNews()
		},
	}
</script>

<style scoped lang="scss">
	.index-root {
		width: 100%;
		height: 100%;
		overflow: auto;
		padding: 30rpx;
		box-sizing: border-box;

		.page-root-bg {
			width: 100vw;
			height: 100vh;
			background: url('@/static/img/bg.png');
			background-size: 100% 100%;

			.content-box {
				width: 100%;
				height: 88%;
				padding: 20rpx;
			}
		}

		.content-item {
			width: 100%;
			// padding: 20rpx 40rpx;
			border-radius: $border-radius-lg;

			.row {
				display: flex;
				flex-wrap: wrap;

				.grid {
					width: 25%;
					display: flex;
					flex-direction: column;
					align-items: center;
					margin: 10rpx 0;

					image {
						width: 70rpx;
						height: 70rpx;
						margin-bottom: $spacing-row-base;
					}

					.title {
						font-size: $font-size-base;
						color: $text-color-base;
						display: flex;
						align-items: baseline;
					}
				}
			}
		}

		/deep/ .uni-scroll-view {
			height: auto;
		}

		/deep/ .uni-scroll-view-content {
			height: auto;
		}

		.news-list {
			.grid {
				width: 100% !important;
			}

			.row {
				// height: 100%;
				height: auto;
				margin: 0 0 40rpx 0;

				.u-search {
					width: 100%;
					margin: 0 0 20rpx 0;
				}

				.grid-one {
					flex-direction: unset;
					align-items: start;
					background-color: $bg-color-white;
					// padding: 20rpx 0;
					// padding: 30rpx;
					border-radius: $border-radius-lg;
					margin: 10rpx 0;
					width: 100%;

					image {
						width: 100%;
						height: 200px;
						border-radius: $border-radius-lg;
					}

					.title {
						// align-items: center;
						font-size: $font-size-lg;
						padding: 20rpx;
					}
				}

				.grid {
					flex-direction: unset;
					align-items: start;
					background-color: $bg-color-white;
					// padding: 20rpx 0;
					padding: 30rpx;
					// border-bottom: 1rpx solid #c7c7c7;
					border-radius: $border-radius-lg;

					.img {
						width: 180rpx;
						height: 150rpx;
						margin-bottom: 0;
					}

					image {
						width: 180rpx;
						height: 150rpx;
						margin-bottom: 0;
						border-radius: $border-radius-lg;
					}

					.info {
						margin: 10rpx 0 10rpx 30rpx;
					}

					.title {
						font-size: 30rpx;
						align-items: center;
						// padding: 20rpx;
					}

					.time {
						margin-top: 20rpx;
						color: #ababab;
						font-size: 26rpx;
					}

					.view {
						display: flex;
						flex-direction: column;
						align-items: center;
						width: 100%;
						/* height: 100%; */
						background-color: rgba(255, 255, 255, 0.6);
						padding: 10rpx 0;
					}
				}
			}
		}

	}

	.tabbar {
		display: flex;
		overflow-x: auto;
		white-space: nowrap;
		// justify-content: space-around;
		-webkit-overflow-scrolling: touch;
		font-size: 24rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		width: 100%;
		background-color: rgb(242, 242, 242);

		.item {
			padding: 20rpx;
		}

		.underline {
			// background: none;
			// border: 2px solid #ad2325;
			border-radius: 0 0 50% 50% / 0 0 100% 100%;
			border-top: none !important;
			width: 40%;
			height: 16rpx;
			margin-top: 10rpx;
			// background: #ad2325;
			// border-radius: 15px
		}

		.active {
			color: #ad2325;
			// background-color: #ad2325;
			// border-radius: 10rpx;
		}
	}
</style>